import { useState, useEffect, useCallback } from 'react'
/* -------------------------------------------------------- antd -- */
import { Dropdown, Button } from 'antd'
import { CaretDownOutlined } from '@ant-design/icons'
/* -------------------------------------------------------- Declare -- */
const { $config, $fn } = window
/* -------------------------------------------------------- 下拉按钮 -- */
const Index = props => {
	let {
		children, 						/** @param {Compoennt}			# Slot */
		label,							/** @param {String}				# 标题 */
		width,							/** @param {String}				# 最小宽度 */
		// button
		disabled,						/** @param {Boolean}			# 禁用 */
		// loading,						/** @param {Boolean}			# 加载 */
		ghost,							/** @param {Boolean,Nummber}	# 幽灵按钮 */
		type='primary',					/** @param {String}				# 按钮类型 */
		size='small',					/** @param {String, Number}		# 按钮尺寸 */
		autoClose,						/** @param {Boolean}			# 自动关闭 */
		// 图片图标
		// imgIconWidth=15,	/** @param {Component,String}	# 图片图标宽度*/
		// imgIconStyle,		/** @param {Component,String}	# 图片图标样式*/
		style, 							/** @param {Object}				# 按钮 style */
		button,							/** @param {Object}				# Button 组件 */
		cacheApi,						/** @param {String}				# 获取数据的 api */
		param,							/** @param {Object}				# api 参数 */
		paging,							/** @param {Object}				# 是否分页*/
		data,							/** @param {Array}				# 数据 */
		api,							/** @param {String}				# 提交 api */
		// idStr=$config.idStr,			/** @param {String}				# 提交字段名 */
		// nameStr=$config.nameStr,		/** @param {String}				# 显示字段名 */
		cache,							/** @param {Boolan}				# 是否缓存 */
		// setName,						/** @param {Funciton}			# 自定义字段名称 */
		//
		// onSelect,					/** @param {Event}				# 选中菜单时执行 */
		onClick,						/** @param {Event}				# 点击菜单时执行 */
		event='click',
		antd							/** @param {Object}				#  */
	} = props
	const [ ajax, setAjax ] = useState(data)
	const [ visible, setVisible ] = useState()
	let [ loading, setLoading ] = useState()
	antd = { arrow:true, placement:'bottom', trigger:[event], ...antd }
	// button
	const sizeStyle = $fn.isNumber(size) ? {height:size} : $config.antd.btnSize[size]
	const btnStyle = { minWidth:width, padding:'0 8px', lineHeight:'100%', ...sizeStyle, ...style }
	button = { type, ghost, disabled, loading, size, ...button  }
	const close = () => {
		setVisible(false)
	}
	const _onClick = useCallback(v => {
		if(v.click){
			const bool = v?.click?.({ ...v, close })
			if( bool ){
				if(api){
					onClick?.({...v, close})
				}else{
					setVisible(false)
				}
			}
		}else{
			onClick?.({...v, close})
		}
		if( autoClose || v.autoClose){
			setVisible(false)
		}
	},[]) // eslint-disable-line
	useEffect(()=> {
		let d = []
		if($fn.hasArray(data)){
			for(let i in data){
				let v = data[i]
				if( $fn.hasObject( v ) ){
					d.push({ 
						key:v.value, 
						value: v.value, 
						label: <a onClick={ e => { e.preventDefault();e.stopPropagation(); _onClick(v) }}>{v.label}</a> 
					})
				}
			}
			// d = data.map( v => ({ 
			// 	key:v.value, 
			// 	value: v.value, 
			// 	label: <a onClick={ e => { e.preventDefault();e.stopPropagation(); _onClick(v) }}>{v.label}</a> 
			// }))
		}
		setAjax( d )
	}, [ data ]) // eslint-disable-lineeslint-disable-line
	
	useEffect(() =>{ 
		$fn.ajax({setAjax, setLoading, api:cacheApi, data:ajax, cache, paging, param, 
			setName: v => {
				return { key:v.value, value: v.value, label: <a onClick={ e => { e.preventDefault();e.stopPropagation(); _onClick(v) }}>{v.label}</a> }
			}
		}) 
	}, []) // eslint-disable-line
	
	return (
		<Dropdown disabled={disabled} onClick={e=>e.stopPropagation()} open={visible} onOpenChange={ v => setVisible(v) } menu={{ items: $fn.hasArray(ajax) ? ajax : [] }} {...antd}>
			{
				children ? children : (
					<Button {...button} style={{...btnStyle, ...button.style}} className='fxm'>
						{ label } <span className={`ease rel ${visible?'rotate-up':''}`} style={{left:2}}><CaretDownOutlined/></span>
					</Button>
				)
			}
		</Dropdown>
	)
}
export default Index